<template>
	<view class="switch-tab">
		<view v-for="(tab, index) in tabs" :key="tab + index" :class="isTabActived(index)" @click="updateVal(index)">{{ tab }}</view>
	</view>
</template>

<script>
export default {
	props: {
		activedTab: {
			type: Number
		},
		tabs: {
			type: Array,
			required: true
		}
	},
	watch: {
		immediate: true,
		handler(n) {
			this.actived = n;
			
		}
	},
	data() {
		return {
			actived: 0
		};
	},
	methods: {
		isTabActived(index) {
			const classList = ['tab'];
			if (this.actived === index) classList.push('active');
			return classList;
		},
		updateVal(val) {
			this.actived = val;
			this.$emit('update:activedTab', val);
		}
	}
};
</script>

<style lang="scss" scoped>
.switch-tab {
	display: flex;
	align-items: center;
	padding: 40upx 32upx 15upx 32upx;
	background-color: white;
	margin-bottom: 20upx;
	.tab {
		height: 30px;
		font-size: 32upx;
		font-weight: 400;
		color: #a6a6a6;
		padding-bottom: 30upx;
		position: relative;
	}
	.tab + .tab {
		margin-left: 50upx;
	}
	.tab::after {
		content: '';
		position: absolute;
		transition: width 0.2s ease-in-out;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 0upx;
		height: 8upx;
		background: $linear-bg;
		border-radius: 4upx;
	}
	.active {
		color: #363940;
		font-weight: bold;
	}
	.active::after {
		width: 38upx;
	}
}
</style>
